<template>
	
	<view class="imgslect t-flex wrap">
		<view class="img" v-for="(item,index) in model" :key="index" @click="previewImg(model,index)">
			<uv-image
			:src="$str.img(item)" mode="aspectFill"
			width="100%"
			height="100%"
			radius="10"
			></uv-image>
			<image src="../../static/icons/29.png" mode="aspectFit" class="close" @click.stop="delImg(index)"
			v-if="!disabled"
			></image>
		</view>
		<view class="add t-flex center f24 c6" @click="chooseImg" v-if="model.length<max && !disabled">
			选择图片
		</view>
		
	</view>
	
	
	<view class="loading t-flex center round" v-if="status.loading">
		<view class="bg round"></view>
		<view class="content t-flex center round bgf">
			<view class="block"></view>
			<view class="text">正在上传</view>
		</view>
	</view>
	
</template>

<script setup>
import { computed, reactive } from 'vue';
import { previewImg, upload } from '../../lib/ts/util';



	
	const emit = defineEmits(['update:modelValue'])
	
	
	let props =  defineProps({
		modelValue:{
			default:[],
			type:Array
		},
		max:{
			type:Number,
			default:9
		},
		disabled:{
			type:Boolean,
			default:false
		}
	})
	
	let model = computed({
		get(){
			return props.modelValue
		},
		set(val){
			emit('update:modelValue',val)
		}
	})
	
	
	
	let status = reactive({
		loading:false,
		timer:null
	})
	
	
	
	//选择图片
	const chooseImg = ()=>{
		if(props.disabled) return
		//剩余可选数量
		let residue = props.max - model.value.length
		if(residue){
			// #ifdef MP-WEIXIN
				uni.chooseMedia({
					mediaType:['image'],
					count:residue,
					success(e){
						let imgTemplateUrlList  = e.tempFiles.map(item=>item.tempFilePath)
						uploadImg(imgTemplateUrlList.slice(0,residue))
						.then(res=>{
							model.value = [...model.value,...res]
						})
					}
				})
			
			// #endif
			
			// #ifndef MP-WEIXIN
				uni.chooseImage({
					count:props.max,
					success(e) {
						let imgTemplateUrlList  = e.tempFilePaths
						uploadImg(imgTemplateUrlList.slice(0,residue))
						.then(res=>{
							model.value = [...model.value,...res]
						})
						
					}
				})
			// #endif
		}else{
			uni.$msg(`可上传数量已达最大值：${props.max}`)
		}
	}
	
	
	const delImg = (index)=>{
		uni.showModal({
			title:'提示',
			content:"确认删除这张图片？",
			success(e) {
				if(e.confirm){
							model.value.splice(index,1)
				}
			}
		})
	}
	
	
	
	//上传图片
	let uploadImg = (arr)=>{
		clearTimeout(status.timer)
		status.timer = setTimeout(()=>{
			status.loading = true
		},1000)		
		return new Promise((resolve,reject)=>{
			let requestGroup = arr.map(item=>{
				return upload(item)
			})
			Promise.all(requestGroup)
			.then(res=>{
				resolve(res.map(item=>item.data.url))
			})
			.catch(err=>{
				uni.$msg('上传失败')
			})
			.finally(()=>{
				clearTimeout(status.timer)
				status.loading = false
			})
		})
	}
	
</script>

<style scoped lang="scss">
	@keyframes rotate {
		to{
			transform: rotate(1turn);
		}
	}
	@keyframes op {
		from{
			opacity: 0;
		}
	}
	.add{
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		background-color: #f5f5f5;
		display: inline-flex;
		margin-bottom: 10rpx;
	}
	
	.img{
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		display: inline-block;
		position: relative;
		.close{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 5rpx;
			top: 5rpx;
			background-color: #fff;
			border-radius: 50%;
		}
	}
	
	.loading{
		.bg{
			background-image: linear-gradient(1.4deg, rgb(139, 166, 246) 3.5%, rgb(168, 240, 248) 96.6%);
			width: 100%;
			height: 100%;
			position: absolute;
			animation: rotate 1s linear;
			animation-iteration-count:infinite;
		}
		width: 200rpx;
		height: 200rpx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 100;
		animation: op 300ms;
		.content{
			width: 90%;
			height: 90%;
			position: absolute;
			z-index: 2;
			background-color: rgb(139, 166, 246);
			overflow: hidden;
			.block{
				width: 120%;
				height: 100%;
				border-radius: 80rpx;
				animation: rotate 3s linear;
				animation-iteration-count:infinite;
				position: absolute;
				background-color: #fff;
				top: -30%;
			}
			.text{
				color: #666;
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 1em;
				text-align: center;
				margin: auto;
				margin-top: 40%;
			}
		}
	}
	
	
</style>